<template>
  <div class="show-tooth">
    <div class="item-tooth item-tooth-lt">
      <template v-for="i in toothList.leftTop">
        <span class="font-size" v-if="i.isActive">{{i.id}}</span>
      </template>
      
    </div>
    <div class="item-tooth item-tooth-rt">
      <template v-for="i in toothList.rightTop">
        <span class="font-size" v-if="i.isActive">{{i.id}}</span>
      </template>
    </div>
    <div class="item-tooth item-tooth-lb">
      <template v-for="i in toothList.leftBottom">
        <span class="font-size" v-if="i.isActive">{{i.id}}</span>
      </template>
    </div>
    <div class="item-tooth item-tooth-rb">
      <template v-for="i in toothList.rightBottom">
        <span class="font-size" v-if="i.isActive">{{i.id}}</span>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from '@vue/runtime-core';
import useRequest from '../../hook/request';

type ToothType = {
  id: string,
  isActive: boolean
}
export default defineComponent({
  name: 'ShowTooth',
  props: {
    toothData: String
  },
  setup(props) {
    // console.log(props.toothData, '字符串牙位数据')
    let toothList = JSON.parse(props.toothData || '')
    return {
      toothList
    }
  }
})
</script>

<style lang="scss" scoped>
.show-tooth {
  height: 100%;
  display: flex;
  flex-wrap: wrap;

  .item-tooth {
    width: 50%;
    height: 50%;
    box-sizing: border-box;
  }

  .item-tooth-lt {
    border-right: 1px solid;
    border-bottom: 1px solid;
    text-align: right;
    unicode-bidi: bidi-override;
		direction: rtl;
  }
  .item-tooth-rt {
    // background-color: green;
    border-bottom: 1px solid;
  }
  .item-tooth-lb {
    // background-color: yellow;
    border-right: 1px solid;
    text-align: right;
    unicode-bidi: bidi-override;
		direction: rtl;
  }
  .item-tooth-rb {
    // background-color: #f40;
  }
  .font-size {
    transform: scale(.7);
    display: inline-block;
  }
}

</style>